<template>
	<div class="tmpl">
		<!-- 1.0分类 -->
		<div class="cate">
			<ul id="cateul">
				<li>
				<a @click="getimglist(0)">全部</a>
				</li>
				<li v-for="item in catelist"><a  @click="getimglist(item.id)">{{item.title}}</a></li>
			</ul>
		</div>
		<!-- 2.0图片列表 -->
		<div class="imglist">
			<ul>
		  		<li v-for="item in list">
	  			<router-link v-bind='{to:"/photo/photoinfo/"+item.id}'>
		    		<img v-lazy="item.img_url">
		    	</router-link>
		    	<p>
		    		<span class="title" v-text = 'item.title'></span><br>
		    		{{item.zhaiyao}}
		    	</p>
		 	 </li>
		</ul>
		</div>
	</div>
</template>


<script>
	import common from '../../kits/common.js';	
	import { Indicator } from 'mint-ui';
	export default {
		data(){
			return {
				catelist:[],//存储分类数据
				list:[], //图片
			}
		},
		created(){
			this.getcate();
			this.getimglist(0); // 默认加载
		},
		methods:{
			//1.0获取图片的分类数据
			getcate(){
				let url = common.apihost + '/api/getimgcategory';
				this.$http.get(url).then(res=>{
					this.catelist = res.body.message;
					// 给tab分类一个长度
					let w = (res.body.message.length+1)*53 + 'px';
					document.getElementById('cateul').style.width = w;
				},);
			},
			//2.0根据分类的id获取图片数据
			getimglist(cateid){
				// 这里注意要先清空，否则会导致第一张图片不会被覆盖
				this.list = '';
				// 这个位置应该是用来提醒用户正在加载中(mint-ui)
				 Indicator.open('Loading...');
			
				let url = common.apihost + '/api/getimages/'+cateid;
				this.$http.get(url).then(res=>{
					//由于服务返回的img_url的地址只是路径的一部分，所有我们应该拼接上云服务器上的前缀
					let imghost = common.imghost;//云服务器地址	
					// 遍历res.body.[message];
					let tmplist = res.body.message;
					console.log(tmplist);
					for(let i = 0; i<tmplist.length; i++){
						tmplist[i].img_url = imghost + tmplist[i].img_url;
					}
					this.list = tmplist;
					// 这个位置关闭正在加载中的提示
					Indicator.close();
				},res=>{

				})
			}
		}
	}
</script>



<style scoped>
	/* 懒加载图片样式开始 */
	.imglist li{
		list-style: none;
		position: relative;
	}
	.imglist ul{
		padding: 0;
		margin: 0;
	}
	.imglist img{
		width: 100%;
		height: 300px;
	}
	.imglist .title {
			font-weight: 700;
			text-align: center;
	}
	.imglist li p {
		position: absolute;
		bottom: -5px;
		color: #fff;
		background-color: rgba(0,0,0,0.4);
	}
	image[lazy=loading] {
  		width: 100%;
 		height: 300px;
  		margin: auto;
	}
	/* 懒加载图片样式结束 */
	/* 分类样式开始 */
	.cate {
		min-width: 320px;
		overflow-x: auto;
	}
	.cate ul {
		padding-left: 10px;
		margin: 5px 0 10px;
		/* width: 320px; */
	}
	.cate li {
		list-style: none;
		display: inline-block;
		padding: 0 0 0 5px;
	}
	.cate li a{
		color: #0094ff;
		font-size: 12px;
	}
	/* 分类样式结束 */
</style>